<%--
  Created by IntelliJ IDEA.
  User: wangxiao
  Date: 14-5-21
  Time: 下午21:18
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <title>柱形图</title>
    <%@include file="../../includes/common.jsp" %>
</head>
<body>
<%@ include file="../../includes/menu.jsp" %>
<div class="container" style="padding: 0 20px;">
    <h3 class="page-title">
        柱形图
        <small>显示柱形图</small>
    </h3>
    <ol class="breadcrumb">
        <li><i class="fa icon-home"></i><a href="#">主页</a></li>
        <li><i class="fa icon-angle-right"></i></li>
        <li><a href="charts/scatter/showScatter">可视化</a></li>
        <li><i class="fa icon-angle-right"></i></li>
        <li class="font-12">柱形图</li>
    </ol>
    <div class="panel panel-primary" style="float:right;width: 100%;">
        <div class="panel-heading">
            <h3 class="panel-title"><i class="icon-bar-chart"></i> 柱形图</h3>
        </div>
        <div class="panel-body">
            <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
            <div id="main" style="height:600px;margin-top: 20px;"></div>
            <div id="tryDiv"></div>
        </div>
    </div>
</div>
<div class="page-footer">
    2014 © DataMiningVisualization by Premiere Team.
    <span id="back-to-top" class="go-top">
        <i class="fa icon-angle-up"></i>
    </span>
</div>
</body>
</html>
<script type="text/javascript">

    function getAttr() {
        var attr;
        $.ajax({
            url: basePath + "charts/bar/getBarAttr",
            dataType: "json",
            type: "POST",
            async: false,
            success: function (returnAttr) {
                attr = returnAttr;
            },
            error: doError
        });
        return attr;
    }

    function getData() {
        var finalData;
        $.ajax({
            url: basePath + "charts/bar/getBarData",
            dataType: "json",
            type: "POST",
            async: false,
            success: function (returnAttr) {
                finalData = returnAttr;
            },
            error: doError
        });
        return finalData;
    }

    function buildData(returnData) {
        var data = [];
        for (var i = 0; i < returnData.length; i++) {
            data[i] = { name: i + 1,
                type: 'bar',
                data: returnData[i]
            }

        }
        return data;
    }


    // 路径配置
    require.config({
        paths: {
            'echarts': './js/common/echarts/echarts-original',
            'echarts/chart/scatter': './js/common/echarts/echarts-original'
        }
    });
    require(
            [
                'echarts',
                'echarts/chart/bar',
                'echarts/chart/line'
            ],
            function (ec) {
                //--- 折柱 ---
                var myChart = ec.init(document.getElementById('main'));
                option = {
                    tooltip: {
                        trigger: 'axis'
                    },
                    //                    legend: {
                    //                        data:['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19']
                    //                    },
                    toolbox: {
                        show: true,
                        feature: {
                            mark: {show: true},
                            dataView: {show: true, readOnly: false},
                            magicType: {show: true, type: ['line', 'bar']},
                            restore: {show: true},
                            saveAsImage: {show: true}
                        }
                    },
                    calculable: true,
                    xAxis: [
                        {
                            type: 'category',
                            data: getAttr()
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            splitArea: {show: true}
                        }
                    ],
                    series: buildData(getData())
                }
                myChart.setOption(option);

                // --- 地图 ---

            }
    );


</script>